<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cookie</title>
  </head>
  <body>
    <div class="cookie-wrap">
      <h3>cookie操作</h3>
      <hr />
      <div class="set-cookie">
        <div>
          <label>
            <span>Cookie名：</span><input class="cookie-name" type="text" />
          </label>
        </div>
        <div>
          <label>
            <span>Cookie值：</span><input class="cookie-value" type="text" />
          </label>
        </div>
        <div>
          <label>
            <span>Cookie过期时间(天)：</span
            ><input class="cookie-expires" type="number" />
          </label>
        </div>
        <div>
          <input type="button" value="保存Cookie" onclick="saveCookie()" />
        </div>
      </div>
      <hr />
      <div>
        <div>
          <input type="text" placeholder="要获取的cookie" class="get-cookie" />
        </div>
        <div>
          <input type="button" value="获取Cookie" onclick="getCookie()" />
        </div>
      </div>
      <hr />
      <div>
        <div>
          <input type="text" placeholder="要删除的cookie" class="del-cookie" />
        </div>
        <div>
          <input type="button" value="删除Cookie" onclick="delCookie()" />
        </div>
      </div>
    </div>
    <script>
      /**
       * 设置Cookie
       * @params:name:cookie名称
       * @params:value:cookie值
       * @params:expires:cookie过期时间,单位天,默认0
       * @return:void
       */
      function setCookie(cookieName = "", cookieValue = "", expires = 0) {
        console.log("setCookie");
        // 判断输入是否为空
        if (!(cookieName.trim() && cookieValue.trim())) return;
        const expiresDays = new Date();
        // 设置过期时间
        expiresDays.setDate(expiresDays.getDate() + expires);
        // 存cookie
        document.cookie = `${cookieName.trim()}=${decodeURIComponent(
          cookieValue.trim()
        )};expires=${expiresDays.toUTCString()}`;
      }

      // 保存cookie的回调
      function saveCookie() {
        console.log("saveCookie");
        // 收集数据
        const cookieNameNode = document.querySelector(".cookie-name");
        const cookieValueNode = document.querySelector(".cookie-value");
        const cookieExpiresNode = document.querySelector(".cookie-expires");
        const cookieName = cookieNameNode.value;
        const cookieValue = cookieValueNode.value;
        const cookieExpires = cookieExpiresNode.value || 0;
        if (!cookieName.trim() || !cookieValue.trim()) {
          alert("cookie名和值不能为空");
          return;
        } else {
          // 调用保存cookie
          setCookie(cookieName, cookieValue, Number(cookieExpires));
          // 保存后清空
          cookieNameNode.value = "";
          cookieValueNode.value = "";
          cookieExpiresNode.value = null;
        }
      }

      // 获取cookie的回调
      function getCookie() {
        const cookies = document.cookie;
        console.log(cookies);
        const showCookieNode = document.querySelector(".get-cookie");
        showCookieNode.value = cookies;
      }

      // 删除cookie
      function delCookie() {
        console.log("delCookie");
        const expiresDays = new Date();
        // 设置过期时间;设置过去时间可以删除这个cookie
        expiresDays.setDate(expiresDays.getDate() - 1);

        const delCookieNode = document.querySelector(".del-cookie");
        document.cookie = `${delCookieNode.value.trim()}=${null};expires=${expiresDays.toUTCString()}`;
        // 删除后清空输入框
        delCookieNode.value = null;
      }
    </script>
  </body>
</html>
